<template>
	<view>
		<!-- x选择收货地址的盒子 -->
		<view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
			<button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">添加收货地址+</button>
		</view>
		
		<!-- 渲染收获信息的盒子 -->
		<view class="address-info-box" v-else>
		    <view class="row1">
		      <view class="row1-left">
		        <view class="username">收货人：{{address.userName}}</view>
		      </view>
		      <view class="row1-right">
		        <view class="phone">电话：<text>138XXXX5555</text></view>
		        <uni-icons type="arrowright" size="16"></uni-icons>
		      </view>
		    </view>
		    <view class="row2">
		      <view class="row2-left">收货地址：</view>
		      <view class="row2-right">河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx </view>
		    </view>
		  </view>
		
		<image class="address-border" src="../../static/cart_border@2x.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		name:"my-address",
		data() {
			return {
				address:{}
			};
		},
		methods:{
			// 选择收货地址
			async chooseAddress(){
				// 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
				    //    返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象
				const res = await uni.chooseAddress().catch(err=>err)
				// console.log(res)
				const [err,succ] = await uni.chooseAddress().catch(err=>err)
				// 2. 用户成功的选择了收货地址
				if(err === null  && succ.errMsg === 'chooseAddress:ok')
				// 为 data 里面的收货地址对象赋值
				this.address = succ
				// console.log(this.address)
			},
		}
	}
</script>

<style lang="scss">
.address-border{
	display: block;
	width: 100%;
	height: 10rpx;
}
.address-choose-box{
	height: 180rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.address-info-box{
	font-size: 25rpx;
	height: 190rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 20rpx;
	.row1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.row1-left{
			.username{
				
			}
		}
		.row1-right{
			display: flex;
			justify-content: space-between;
			.phone{
				
			}
		}
	}
	.row2{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		.row2-left{
			white-space: nowrap;
		}
		.row2-right{
			
		}
	}
}
</style>